<template>
  <el-main>
    <div style="display:flex;">
      <span style="color:white;">单位名称:</span>
      <el-input v-model="input1" clearable placeholder="请输入单位名称" size="mini"
                style="height:40px;width: 200px;border-radivs:50px;"></el-input>
      <span style="color:white;">登录账号:</span>
      <el-input v-model="input2" clearable placeholder="登录账号" size="mini"
                style="height:40px;width: 200px;border-radivs:50px"></el-input>

      <el-button icon="el-icon-search" size="mini" type="primary">搜索
      </el-button>
      <el-button icon="el-icon-delete" size="mini" type="primary">清空
      </el-button>
    </div>
    <el-button icon="el-icon-plus" type="primary" @click="dialogVisible = true">新增
    </el-button>
    <el-dialog
        :before-close="handleClose"
        :visible.sync="dialogVisible"
        title="提示"
        width="30%">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="单位名称">
          <el-input v-model="formInline.name" placeholder="请输入 单位名称"></el-input>
        </el-form-item>
        <el-form-item label="登录密码">
          <el-input v-model="formInline.user" placeholder="请输入 登录密码"></el-input>
        </el-form-item>
        <el-form-item label="登录帐号">
          <el-input v-model="formInline.login" placeholder="请输入 登录帐号"></el-input>
        </el-form-item>
        <el-form-item label="上级单位">

          <span class="demonstration"></span>
          <el-cascader
              :options="options"
              :props="{ checkStrictly: true }"
              clearable
              filterable
              placeholder="请搜索 所属单位"></el-cascader>
        </el-form-item>
        <el-form-item label="单位属性">
          <el-select v-model="formInline.region" placeholder="请选择 单位属性">
            <el-option label="渠道公司" value="shanghai"></el-option>
            <el-option label="工程商" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formInline.region" placeholder="请选择 状态">
            <el-option label="有效" value="shanghai"></el-option>
            <el-option label="锁定" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地理位置">
          <el-input v-model="formInline.user" placeholder="请输入 地理位置"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <div class="mmm">
      <el-button circle icon="el-icon-download" style="top:130px;left:1200px" type="primary"
                 @click="open()"></el-button>
      <el-button circle icon="el-icon-refresh" style="top:130px;left:1250px" type="success"></el-button>
      <el-button circle icon="el-icon-s-operation" style="top:130px;left:1300px" type="info"></el-button>
      <el-button circle icon="el-icon-search" style="top:130px;left:1350px" type="warning"></el-button>
    </div>
    <el-table
        :data="tableData"
        :tree-props="{children: 'children', hasChildren: 'hasChildren',}"
        border
        slot="scope"
        default-expand-all
        row-key="id"
        style="top:20px;width: 100%;background-color: #242E66;color:white">
      <el-table-column
          label="单位名称"
          prop="name"
          width="300">
      </el-table-column>
      <el-table-column
          label="级别"
          prop="class"
          width="50">
      </el-table-column>
      <el-table-column
          label="登录账号"
          prop="login"
          width="150">
      </el-table-column>
      <el-table-column
          label="单位属性"
          prop="nature"
          width="150">
      </el-table-column>
      <el-table-column
          label="下级数量"
          prop="count"
          width="150">
      </el-table-column>
      <el-table-column
          label="创建日期"
          prop="date"
          width="150">
      </el-table-column>
      <el-table-column
          label="状态"
          prop="state"
          width="150">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template v-slot:default="scope">
          <el-button size="small" type="text" @click="handleClick(scope.row)">查看</el-button>
          <el-button size="small" type="text">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-main>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      input1: '',
      input2: '',
      tableData: [{
        id: 1,
        name: '智慧消防远程监管平台',
        class: '1',
        login: 'rm001',
        nature: '渠道公司',
        count: '2',
        date: '2022年05月11日',
        state: '有效',
        children: [{
          id: 11,
          name: '朔州市消防大队',
          class: '2',
          login: 'szxfdd',
          nature: '渠道公司',
          count: '2',
          date: '2022年05月18日',
          state: '有效',
          children: [{
            id: 111,
            name: '圣厚源大酒店',
            class: '3',
            login: 'shenghouyuan',
            nature: '渠道公司',
            count: '1',
            date: '2022年05月18日',
            state: '有效',
            children: [{
              id: 1111,
              name: '圣厚源办公室',
              class: '4',
              login: '圣厚源办公室',
              nature: '渠道公司',
              count: '0',
              date: '2022年06月13日',
              state: '有效',
            }]
          }, {
            id: 112,
            name: '瑞铭网络通信工程有限公司',
            class: '3',
            login: 'ruiming',
            nature: '渠道公司',
            count: '0',
            date: '2022年05月18日',
            state: '有效',
          }]
        }, {
          id: 12,
          name: '瑞铭通信工程有限公司',
          class: '2',
          login: 'ruiming002',
          nature: '工程商',
          count: '4',
          date: '2022年05月13日',
          state: '有效',
          children: [{
            id: 121,
            name: '朔州经济开发区管理委员会',
            class: '3',
            login: 'kfqgwh',
            nature: '渠道公司',
            count: '2',
            date: '2023年12月16日',
            state: '有效',
            children: [{
              id: 1211,
              name: '开发区环境局',
              class: '4',
              login: 'kfqhjj',
              nature: '渠道公司',
              count: '0',
              date: '2023年12月16日',
              state: '有效',
            }, {
              id: 1212,
              name: '开发区建设局',
              class: '4',
              login: 'kfqjsj',
              nature: '渠道公司',
              count: '0',
              date: '2023年12月16日',
              state: '有效',
            }]
          }, {
            id: 122,
            name: '朔州市邮政储蓄银行',
            class: '3',
            login: 'SZSYZCXYH',
            nature: '渠道公司',
            count: '15',
            date: '2023年01月04日',
            state: '有效',
            children: [{
              id: 1221,
              name: '右玉县支行',
              class: '4',
              login: 'YCYH015',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月05日',
              state: '有效',
            }, {
              id: 1222,
              name: '山阴县同太南路支行',
              class: '4',
              login: 'YCYH014',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月05日',
              state: '有效',
            }, {
              id: 1223,
              name: '山阴县支行',
              class: '4',
              login: 'YCYH013',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月05日',
              state: '有效',
            }, {
              id: 1224,
              name: '怀仁迎宾街支行',
              class: '4',
              login: 'YCYH012',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月05日',
              state: '有效',
            }, {
              id: 1225,
              name: '怀仁市支行',
              class: '4',
              login: 'YCYH011',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月05日',
              state: '有效',
            }, {
              id: 1226,
              name: '平鲁区支行',
              class: '4',
              login: 'YCYH010',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月05日',
              state: '有效',
            }, {
              id: 1227,
              name: '应县支行',
              class: '4',
              login: 'YCYH009',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月05日',
              state: '有效',
            }, {
              id: 1228,
              name: '应县新世纪广场支行',
              class: '4',
              login: 'YCYH008',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月05日',
              state: '有效',
            }, {
              id: 1229,
              name: '鄯阳街支行',
              class: '4',
              login: 'YCYH007',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月05日',
              state: '有效',
            }, {
              id: 12210,
              name: '马邑南路支行',
              class: '4',
              login: 'YCYH006',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月05日',
              state: '有效',
            }, {
              id: 12211,
              name: '开发区支行',
              class: '4',
              login: 'YCYH005',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月05日',
              state: '有效',
            }, {
              id: 12212,
              name: '振华支行',
              class: '4',
              login: 'YCYH004',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月05日',
              state: '有效',
            }, {
              id: 12213,
              name: '古北街支行',
              class: '4',
              login: 'YCYH003',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月04日',
              state: '有效',
            }, {
              id: 12214,
              name: '祥泰支行',
              class: '4',
              login: 'YCYH002',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月04日',
              state: '有效',
            }, {
              id: 12215,
              name: '市分行营业部',
              class: '4',
              login: 'YCYH001',
              nature: '渠道公司',
              count: '0',
              date: '2023年01月04日',
              state: '有效',
            }]
          }, {
            id: 123,
            name: '开发南路',
            class: '3',
            login: 'kfnl',
            nature: '工程商',
            count: '1',
            date: '2022年09月28日',
            state: '有效',
            children: [{
              id: 1231,
              name: '朔城区第三中学',
              class: '4',
              login: 'scqdszx',
              nature: '工程商',
              count: '0',
              date: '2022年09月28日',
              state: '有效',
            }]
          }, {
            id: 124,
            name: '文远路街道',
            class: '3',
            login: 'wyljd',
            nature: '渠道公司',
            count: '3',
            date: '2022年07月26日',
            state: '有效',
            children: [{
              id: 1241,
              name: '朔州今乔智慧公寓',
              class: '4',
              login: 'szjqzhgy',
              nature: '渠道公司',
              count: '0',
              date: '2022年09月01日',
              state: '有效',
            }, {
              id: 1242,
              name: '朔州浩天宾馆',
              class: '4',
              login: 'szhtbg',
              nature: '渠道公司',
              count: '0',
              date: '2022年09月01日',
              state: '有效',
            }, {
              id: 1243,
              name: '幸福家纺',
              class: '4',
              login: 'xfjf',
              nature: '渠道公司',
              count: '0',
              date: '2022年07月26日',
              state: '有效',
            }]
          }]
        }]
      }],
      tableData1: [{
        id: 1,
        name: '智慧消防远程监管平台',
        class: '1',
        login: 'rm001',
        nature: '渠道公司',
        count: '2',
        date: '2022年05月11日',
        state: '有效',
        hasChildren: true
      }],
      dialogVisible: false,
      formInline: {
        user: '',
        region: ''
      },
      options: [
        {
          value: '智慧消防远程监控平台', label: '智慧消防远程监控平台',
          children: [{
            value: '朔州市消防大队', label: '朔州市消防大队',
            children: [{
              value: '圣厚源大酒店', label: '圣厚源大酒店',
              children: [{value: '圣厚源办公室', label: '圣厚源办公室'}]
            },
              {value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司'}]
          },
            {
              value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司',
              children: [{
                value: '朔州市经济开发区管理委员会', label: '朔州市经济开发区管理委员会',
                children: [{value: '开发区环境局', label: '开发区环境局'}, {
                  value: '开发区建设局',
                  label: '开发区建设局'
                }]
              },
                {
                  value: '朔州市邮政储蓄银行', label: '朔州市邮政储蓄银行',
                  children: [{value: '右玉县支行', label: '右玉县支行'}, {value: '山阴县支行', label: '山阴县支行'}]
                },
                {
                  value: '开发南路', label: '开发南路',
                  children: [{value: '朔城区第三中学', label: '朔城区第三中学'}]
                },
                {
                  value: '文远路街道', label: '文远路街道',
                  children: [{value: '朔州今乔智慧公寓', label: '朔州今乔智慧公寓'}, {
                    value: '幸福家纺',
                    label: '幸福家纺'
                  }]
                }]
            }]
        }
      ],
    }
  },
  methods: {
    open() {
      this.$confirm('此操作将下载该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '下载成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下载'
        });
      });
    },
    handleClick(row) {
      console.log(row);
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 11,
            name: '智慧消防远程监管平台',
            class: '1',
            login: 'rm001',
            nature: '渠道公司',
            count: '2',
            date: '2022年05月11日',
            state: '有效',
          }, {
            id: 12,
            name: '智慧消防远程监管平台',
            class: '1',
            login: 'rm001',
            nature: '渠道公司',
            count: '2',
            date: '2022年05月11日',
            state: '有效',
          }
        ])
      }, 1000)
    }
  },
}
</script>

<style scoped>
.mmm {
  margin-top: -50px;
  display: flex;
  justify-content: end;
}

.el-main {
  background-color: #242E66;
}

::v-deep.el-table th.el-table__cell.is-leaf {
  background-color: #3F51B5;
  border: none !important;
}

::v-deep.el-table td.el-table__cell {
  background-color: #242E66;
  border: none !important;
}

::v-deep.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  background-color: #242E66 !important;
}

::v-deep.el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  background-color: #242E66 !important;
}
</style>
